<template>
  <div id="toast" v-show="show">
    <div>
      {{message}}
    </div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  props:{
    // message:{
    //   type:String,
    //   default:''
    // },
    // show:{
    //   type:Boolean,
    //   default: false
    // }
  },
  data(){
    return{
      message:'',
      isShow:false
    }
  },
  methods:{
    show(message,duration){
      this.isShow=true;
      this.message=message;

      setTimeout(()=>{
        this.isShow=false;
        this.message=message;
      },duration)
    }
  }

}
</script>

<style scoped>
#toast{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-100%);
  padding: 5px 10px;
  background: rgba(0,0,0,.7);
  color: white;
}
</style>
